<template>
    <div class="wrap">
        <!-- 顶部结构 -->
        <div class="top">
            <span class="hosname">{{ workData.baseMap?.hosname }}</span>
            <span>|</span>
            <span class="line"></span>
            <span>{{ workData.baseMap?.bigname }}</span>
            <span class="dot">·</span>
            <span class="hosdeparment">{{ workData.baseMap?.depname }}</span>
        </div>
        <!-- 中部日期结构 -->
        <div class="centent">
            <span>{{ workData.baseMap?.workDateString }}</span>
            <div class="conrainer">
                <div class="item" 
                :class="{ active: item.status == -1 || item.availableNumber == -1 ,cur:item.workDate == workTime.workDate}"
                    v-for="item in workData.bookingScheduleList"
                     :key="item"
                     @click="changeTime(item)"
                     
                     >
                    <div class="top2">{{ item.workDate }}  {{ item.dayOfWeek }}</div>
                    <div class="bottom2">
                        <div v-if="item.status == -1">停止挂号</div>
                        <div v-if="item.status == 0">{{
                            item.availableNumber == -1 ? '约满了' : `有号(${item.availableNumber})`
                        }}</div>
                    </div>
                </div>
            </div>
            <el-pagination v-model:current-page="pageNo" layout="prev, pager, next" :total="workData.total"
                @current-change="fetchWorkData" />
        </div>
        <!-- 底部展示医生的结构 -->
        <div class="bottom">
            <!-- 展示即将放号的时间 -->
            <div class="will" v-if="workTime.status==1">
                <span>2023年6月15日 8:30 </span>
                <span>放号</span>
            </div>
            <!-- 展示医生的结构 上午 下午 -->
            <div class="doctor">
                <!-- 上午 -->
                <div class="moring">
                    <!-- 顶部文字信息 -->
                    <div class="tip">
                        <svg t="1697886964679" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6125" width="32" height="32">
                            <path
                                d="M513.123 795.991c-76.156 0-147.753-29.658-201.603-83.508-53.849-53.849-83.504-125.444-83.504-201.596 0-76.153 29.657-147.749 83.504-201.598 53.85-53.851 125.446-83.508 201.603-83.508 76.147 0 147.742 29.658 201.593 83.508 53.853 53.852 83.511 125.447 83.511 201.598s-29.659 147.747-83.511 201.597c-53.852 53.85-125.445 83.507-201.593 83.507zM513.123 272.352c-131.529 0-238.534 107.007-238.534 238.535s107.006 238.533 238.534 238.533 238.533-107.005 238.533-238.533c0-131.529-107.006-238.535-238.533-238.535z"
                                fill="#e38b00" p-id="6126"></path>
                            <path
                                d="M513.123 149.007c-12.861 0-23.285-10.426-23.285-23.285v-91.359c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.358c0 12.862-10.426 23.286-23.285 23.286z"
                                fill="#e38b00" p-id="6127"></path>
                            <path
                                d="M513.123 1010.674c-12.861 0-23.285-10.426-23.285-23.285v-91.346c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.346c0 12.861-10.426 23.285-23.285 23.285z"
                                fill="#e38b00" p-id="6128"></path>
                            <path
                                d="M240.764 261.825c-5.959 0-11.919-2.274-16.466-6.821l-64.592-64.591c-9.094-9.093-9.094-23.838 0-32.931 9.093-9.094 23.838-9.094 32.931 0l64.593 64.592c9.094 9.093 9.094 23.838 0 32.931-4.546 4.545-10.507 6.82-16.467 6.82z"
                                fill="#e38b00" p-id="6129"></path>
                            <path
                                d="M850.050 871.111c-5.958 0-11.919-2.272-16.467-6.82l-64.593-64.593c-9.093-9.094-9.093-23.839 0-32.932 9.094-9.094 23.839-9.094 32.932 0l64.593 64.593c9.093 9.094 9.093 23.839 0 32.932-4.546 4.545-10.507 6.82-16.466 6.82z"
                                fill="#e38b00" p-id="6130"></path>
                            <path
                                d="M36.59 534.183c-12.861 0.001-23.286-10.423-23.289-23.283-0.001-12.861 10.423-23.286 23.283-23.289l91.348-0.011c12.861-0.001 23.286 10.423 23.289 23.283 0.001 12.861-10.423 23.286-23.283 23.289l-91.348 0.011z"
                                fill="#e38b00" p-id="6131"></path>
                            <path
                                d="M989.613 534.173h-91.346c-12.861 0-23.285-10.426-23.285-23.285s10.426-23.285 23.285-23.285h91.346c12.861 0 23.285 10.426 23.285 23.285s-10.426 23.285-23.285 23.285z"
                                fill="#e38b00" p-id="6132"></path>
                            <path
                                d="M176.173 871.122c-5.959 0-11.919-2.272-16.466-6.82-9.094-9.094-9.094-23.839 0-32.932l64.593-64.593c9.094-9.094 23.838-9.094 32.931 0s9.094 23.839 0 32.932l-64.593 64.593c-4.546 4.546-10.506 6.82-16.466 6.82z"
                                fill="#e38b00" p-id="6133"></path>
                            <path
                                d="M785.457 261.825c-5.959 0-11.918-2.272-16.467-6.821-9.094-9.094-9.093-23.838 0.001-32.931l64.593-64.592c9.094-9.093 23.838-9.094 32.931 0s9.093 23.838-0.001 32.931l-64.593 64.592c-4.545 4.546-10.506 6.821-16.465 6.821z"
                                fill="#e38b00" p-id="6134"></path>
                        </svg>
                        <span class="text">上午号源</span>
                    </div>
                    <!-- 每一个医生的信息 -->
                    <div class="doc_info" v-for="doctor in moringArr" :key="doctor.id">
                        <!-- 展示医生的名字|技能 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">{{ doctor.skill }}</div>
                        </div>
                        <!-- 展示挂号的钱数 -->
                        <div class="right">
                            <div class="money">
                                ￥{{doctor.amount}}
                            </div>
                            <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber }}</el-button>
                        </div>
                    </div>

                </div>
                <!-- 下午 -->
                <div class="after">
                     <!-- 顶部文字信息 -->
                    <div class="tip">
                        <svg t="1697887148443" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8772" width="32" height="32">
                            <path
                                d="M992.8 752.3H30.2c-10.6 0-19.3-8.6-19.3-19.3 0-10.6 8.6-19.3 19.3-19.3h962.6c10.6 0 19.3 8.6 19.3 19.3 0 10.7-8.7 19.3-19.3 19.3zM800.3 906.3H222.7c-10.6 0-19.3-8.6-19.3-19.3 0-10.6 8.6-19.3 19.3-19.3h577.6c10.6 0 19.3 8.6 19.3 19.3-0.1 10.7-8.7 19.3-19.3 19.3zM829.2 675.3c-10.6 0-19.3-8.6-19.3-19.3 0-159.2-129.5-288.8-288.8-288.8-159.2 0-288.8 129.5-288.8 288.8 0 10.6-8.6 19.3-19.3 19.3s-19.3-8.6-19.3-19.3c0-87.4 34-169.6 95.9-231.4s144-95.9 231.4-95.9 169.6 34 231.4 95.9c61.8 61.8 95.9 144 95.9 231.4 0.1 10.6-8.5 19.3-19.1 19.3zM521.1 290.2c-10.6 0-19.3-8.6-19.3-19.3v-77c0-10.6 8.6-19.3 19.3-19.3 10.6 0 19.3 8.6 19.3 19.3v77c0 10.7-8.6 19.3-19.3 19.3zM778.7 388.8c-7.5-7.5-7.5-19.7 0-27.2l54.5-54.5c7.5-7.5 19.7-7.5 27.2 0s7.5 19.7 0 27.2l-54.5 54.5c-7.5 7.5-19.7 7.5-27.2 0zM244.3 388.8c-7.5 7.5-19.7 7.5-27.2 0l-54.5-54.5c-7.5-7.5-7.5-19.7 0-27.2s19.7-7.5 27.2 0l54.5 54.5c7.5 7.5 7.5 19.7 0 27.2z"
                                fill="#e38b00" p-id="8773"></path>
                        </svg>
                        <span class="text">下午号源</span>
                    </div>
                    <!-- 每一个医生的信息 -->
                    <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
                        <!-- 展示医生的名字|技能 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">{{ doctor.skill }}</div>
                        </div>
                        <!-- 展示挂号的钱数 -->
                        <div class="right">
                            <div class="money">
                                ￥{{doctor.amount}}
                            </div>
                            <el-button type="primary" size="default"  @click="goStep2(doctor)">{{ doctor.availableNumber }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,computed } from 'vue';
import { reqHospitalWork,reqHospitalDoctor } from "../../../api/hospital";
import { useRoute,useRouter } from 'vue-router';
import type {  HospitalWorkResponseData,DoctorResponseData,DocArr,Doctor } from "../../../api/hospital/type";
// 获取路由对象
let $route = useRoute();
// 获取路由器对象
let $router = useRouter();
// 分页器当前页码
let pageNo = ref<number>(1);
// 每页展示几条数据
let limit = ref<number>(6);
// 存储医院可是挂号的数据
let workData = ref<any>({});
// 存储排版日期：当前数据的第一个
let workTime:any = ref({});
// 存储排班医生的数据
let docArr = ref<DocArr>([]);
// 组件挂载完毕发送一次请求
onMounted(() => {
    fetchWorkData();
});
// 获取挂号数据
const fetchWorkData = async () => {
    let result: HospitalWorkResponseData = await reqHospitalWork(pageNo.value, limit.value, $route.query.hoscode as string, $route.query.depcode as string);
    if (result.code == 200) {
        workData.value = result.data;
        // 存储第一天的数据
        workTime.value = workData.value.bookingScheduleList[0];
        // 获取一次医院的数据
        getDoctorWorkData();
    }
}
// 获取某一天医生排班的数据
const getDoctorWorkData = async() =>{
    // 医院编号
    let hoscode:string = $route.query.hoscode as string;
    // 科室编号
    let depcode:string = $route.query.depcode as string;
    // 时间
    let workDate:string = workTime.value.workDate;
    // 获取排班医生的数据
    let result:DoctorResponseData =  await reqHospitalDoctor(hoscode,depcode,workDate);
    if(result.code==200){
        docArr.value = result.data;
    }
}
// 点击顶部某一天的时候触发回调
const changeTime = (item:any)=>{
    // 存储用户选择那一天的数据
    workTime.value = item;
    // 再发一次获取医生排班数据
    getDoctorWorkData();
}
// 计算上午排版的医生数据
let moringArr = computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        return doc.workTime == 0;
    })
})
// 计算上午排版的医生数据
let afterArr = computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        return doc.workTime == 1;
    })
})
// 路由跳转进入选择就诊人页面
const goStep2 = (doctor:Doctor)=>{
    // 编程式导航进行路由跳转且携带医生的ID
    $router.push({path:"/hospital/register_step2",query:{docId:doctor.id}});
}
</script>

<style lang="scss" scoped>
.wrap {
    .top {
        display: flex;
        height: 30px;
        font-size: 20px;
        margin: 20px 20px;

        span {
            color: #a7abb7;
            margin-left: 10px;
        }
    }

    .centent {
        margin: 20px, 0px;
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
            color: #e38b00;
            font-weight: 900;
        }

        .conrainer {
            width: 100%;
            display: flex;
            margin: 30px 0;

            .item {
                flex: 1;
                width: 100%;
                margin: 0px 5px;
                border: 2px solid #e38b00;
                display: flex;
                flex-direction: column;
                align-items: center;

                &.active {
                    border: 2px solid #a7abb7;
                    color: #8a8e99;

                    .top2 {
                        background: #a7abb7;
                    }
                }

                .top2 {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    background-color: #f3bf6d;
                    text-align: center;
                }

                .bottom2 {
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                }
                &.cur{
                    transform: scale(1.1);
                }
            }

        }
    }

    .bottom {
        .will {
            text-align: center;
            font-size: 30px;
            font-weight: 700;

            span {
                color: #e38b00;
            }
        }

        .doctor {
            .moring,.after {
                .tip {
                    display: flex;
                    align-items: center;
                    .text{
                        font-size: 20px;
                        font-weight: 500;
                        color: #e38b00;
                    }
                }
                .doc_info{
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0px;
                    border-bottom: 3px solid #ffdea8fc;
                    .left{
                        color: #e38b00;
                        margin: 10px 0px;
                        span{
                            margin: 0px 5px;
                            font-size: 15px;
                        }
                    }
                    .right{
                        width:150px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .money{
                            color: #a7abb7;
                        }
                    }
                    .skill{
                        margin: 10px 0px;
                        color: #a7abb7;
                    }
                }
            }
        }
    }
}
</style>